<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>写文章这件事 | 被删的前端游乐场</title>
    <meta name="generator" content="VuePress 1.8.2">
    
    <meta name="description" content="Just playing around">
    
    <link rel="preload" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css" as="style"><link rel="preload" href="/front-end-playground/assets/js/app.1e2670bf.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/2.38d016d1.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/3.e3f029cb.js" as="script"><link rel="preload" href="/front-end-playground/assets/js/132.31305f5c.js" as="script">
    <link rel="stylesheet" href="/front-end-playground/assets/css/0.styles.6ad2a9ca.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/front-end-playground/" class="home-link router-link-active"><!----> <span class="site-name">被删的前端游乐场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link router-link-active">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/front-end-playground/" class="nav-link">概述</a></div><div class="nav-item"><a href="/front-end-playground/front-end-basic/" class="nav-link">前端领域</a></div><div class="nav-item"><a href="/front-end-playground/vue/" class="nav-link">Vue学习</a></div><div class="nav-item"><a href="/front-end-playground/wxapp/" class="nav-link">小程序学习</a></div><div class="nav-item"><a href="/front-end-playground/front-end-others/" class="nav-link">百家齐放</a></div><div class="nav-item"><a href="/front-end-playground/front-end-addon/" class="nav-link">前端的进击</a></div><div class="nav-item"><a href="/front-end-playground/front-end-work/" class="nav-link router-link-active">前端与工作</a></div><div class="nav-item"><a href="/front-end-playground/faq.html" class="nav-link">FAQ</a></div> <a href="https://github.com/godbasin/front-end-playground" target="_blank" rel="noopener noreferrer" class="repo-link">
    Github
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0" style="padding-top:10px;"><div class="kitty-main" data-v-2b653b36><span class="stand" data-v-2b653b36></span> <div class="cat" data-v-2b653b36><div class="body" data-v-2b653b36></div> <div class="head" data-v-2b653b36><div class="ear" data-v-2b653b36></div> <div class="ear" data-v-2b653b36></div></div> <div class="face" data-v-2b653b36><div class="nose" data-v-2b653b36></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div> <div class="whisker-container" data-v-2b653b36><div class="whisker" data-v-2b653b36></div> <div class="whisker" data-v-2b653b36></div></div></div> <div class="tail-container" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36><div class="tail" data-v-2b653b36></div></div></div></div></div></div></div></div></div></div> <p class="sidebar-heading open"><span>前端这几年</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-1-begin-in.html" class="sidebar-link">1.转岗之路</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-2-principle.html" class="sidebar-link">2.工作原则和选择</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-3-growth.html" class="sidebar-link">3.关于成长和焦虑</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-4-health.html" class="sidebar-link">4.生命与健康</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-5.html" class="sidebar-link">5.沉淀习惯养成</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-6.html" class="sidebar-link">6.工作选择的困惑</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-7.html" class="sidebar-link">7.情绪与保持清醒</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-8.html" class="sidebar-link">8.工作中的矛盾</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-9.html" class="sidebar-link">9.提升工作效率</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-10.html" class="sidebar-link">10.我的工作历险记</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-front-end-11.html" class="sidebar-link">11.关于一年一换的魔咒</a></li><li><a href="/front-end-playground/front-end-work/front-end-days/about-writing.html" aria-current="page" class="active sidebar-link">写文章这件事</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-work/front-end-days/about-writing.html#为什么要写" class="sidebar-link">为什么要写</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-work/front-end-days/about-writing.html#怎么写" class="sidebar-link">怎么写</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-work/front-end-days/about-writing.html#如何坚持写" class="sidebar-link">如何坚持写</a></li><li class="sidebar-sub-header"><a href="/front-end-playground/front-end-work/front-end-days/about-writing.html#结束语" class="sidebar-link">结束语</a></li></ul></li><li><a href="/front-end-playground/front-end-work/front-end-days/a-book-with-one-story.html" class="sidebar-link">一本书和一个故事</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0" style="padding-top:;"><!----> <p class="sidebar-heading"><span>面试这件事</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><p>上周有给一些小伙伴分享写文章的一些经验，本以为身为程序员的自己讲的内容却是写文章会有点水，没想到大家的反响还不错，因此这里我将这些内容分享出来，希望能对更多的人也有用处叭～</p> <h2 id="为什么要写"><a href="#为什么要写" class="header-anchor">#</a> 为什么要写</h2> <p>做一件事之前肯定都会有些原因，对我来说，开始写文章最初是由于自身的记性差。</p> <h3 id="_1-记性差"><a href="#_1-记性差" class="header-anchor">#</a> (1) 记性差</h3> <p>前端是一个技术变化和更新迭代非常快的领域，因此我们需要不断地进行学习。</p> <p>很多时候，学过的一些内容由于没有长期使用，很快又会忘记，也因此一些坑会反复掉进去很多遍。为了避免这样的情况，我用了最笨的方法：写下来。写下来之后就可以很方便地翻出来，也可以通过搜索引擎搜索到相应的内容。</p> <h3 id="_2-思考是一件很有意思的事情"><a href="#_2-思考是一件很有意思的事情" class="header-anchor">#</a> (2) 思考是一件很有意思的事情</h3> <p>习惯写笔记之后，发现越来越多的东西可以写下来。写文章和拍照片、排视频不一样，我们每次动笔之前都需要思考并组织自己的语言。所有这些写下来的东西，再次翻阅的时候都会重新思考，你会发现自己的认知跟以前不大一样了，会不断更新自己的认知。</p> <h3 id="_3-分享可以拓展视野"><a href="#_3-分享可以拓展视野" class="header-anchor">#</a> (3) 分享可以拓展视野</h3> <p>如果每个人都将自己的经验分享出来，大家会共同进步，越走越快。而当我们将自己的思考和想法分享出来，可以让更多人一起思考和研究，激起大家的讨论。</p> <p>在交流的过程中，你会发现“原来他们是这样看待这个问题的呀”。通过这样的方式，我们可以接触到各种各样的思维方式和角度。</p> <h3 id="_4-提升效率"><a href="#_4-提升效率" class="header-anchor">#</a> (4) 提升效率</h3> <p>我们在工作中，开发过很多系统，也踩过很多的坑。因此，有时候会有一些遇到同样问题的人来问，如果每次我们都要详细地跟对方讲解，会耗费不少的时间和经历。如果我们有养成记录的习惯，当对方询问的时候，可以直接把自己的笔记或者文章链接，直接给到对方阅读。通过这样的方式，可以节省双方的时间。</p> <h2 id="怎么写"><a href="#怎么写" class="header-anchor">#</a> 怎么写</h2> <p>一两年前我也做过写文章的相关分享，当时我并没有提出特别多的写作技巧。因为一直以来，我都没有关注该怎么去写，只是单纯地把自己想要记录的内容整理一下，然后记下来而已。</p> <p>而当有些人问我，写文章到底有什么方法，刚开始我答不上来。后来我也观察自己写文章的一些思考方式和习惯，发现的确会有些注意的地方，在这里分享给大家。</p> <h3 id="文章的目的是什么"><a href="#文章的目的是什么" class="header-anchor">#</a> 文章的目的是什么</h3> <p>在写文章之前，我们首先需要理清这篇文章主要目的是什么。对于开发来说，一般可能包括：</p> <ul><li>某个问题的解决过程</li> <li>对新知识/技术的理解</li> <li>架构设计和解决方案</li> <li>工具的使用经验</li> <li>……</li></ul> <p>在理清文章的大致方向之后，我们可以整理出大概的思路，比如：</p> <ul><li>某个问题的解决过程 -&gt; 问题描述、问题分析、解决过程、总结</li> <li>对新知识/技术的理解 -&gt; 技术介绍、应用场景、技术比对、自身思考</li> <li>架构设计和解决方案 -&gt; 背景介绍、现状问题、业界方案、方案设计、执行过程、执行效果、未来规划</li> <li>工具的使用经验 -&gt; 工具出现背景、设计原理、解决什么问题、工具说明、使用效果、踩坑记录</li></ul> <p>以上这些只是举例参考，我们在梳理出文章的大致思路之后，就很容易继续往下写了。</p> <h3 id="文章的目标对象是谁"><a href="#文章的目标对象是谁" class="header-anchor">#</a> 文章的目标对象是谁</h3> <p>在开始写文章之前，我们还需要知道文章是写给谁看的。</p> <p>前面也说过，我记性比较差，即使是自己写过的文章过段时间也常常记不住了，所以经常需要自己再去翻阅。因此，对我来说，很多时候文章都是写给自己看的，同时这篇文章也可以写给和我遇到同样问题的人。</p> <p>当我如果想把这篇文章给到其他人看的时候，要知道其他人的认知和我并不会完全一致，因此我需要在这篇文章里做一个认知差距的补充：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/about-writing-1.png" alt=""></p> <p>比如，我之前有写过一篇<a href="http://www.godbasin.com/front-end-basic/deep-learning/reactive-programing.html" target="_blank" rel="noopener noreferrer">《响应式编程在前端领域的应用》<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，阅读这篇文章的人可能并不认识响应式编程，因此我会在文章最开始补充这块的知识：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/about-writing-2.png" alt=""></p> <h3 id="确认文章大纲"><a href="#确认文章大纲" class="header-anchor">#</a> 确认文章大纲</h3> <p>前面我们在整理文章的目的的时候，已经大致梳理了文章的写作思路，在这里我们就可以梳理出大纲。比如这篇文章怎么写这段内容的大纲：</p> <div class="language-cmd extra-class"><pre class="language-text"><code>怎么写好一篇文章
- 这篇文章的目的是什么
  - 记录过程
  - 新技术介绍
  - 架构设计
  - 工具使用经验
- 文章的目标对象是谁
- 确定文章大纲
- 写文章技巧
</code></pre></div><p>列大纲也可以使用思维导图的方式整理，看个人习惯就好。</p> <h3 id="写文章技巧"><a href="#写文章技巧" class="header-anchor">#</a> 写文章技巧</h3> <p>在确认了文章的大纲之后，我们就可以往里面填充内容了。在具体写的时候，有几个小技巧：</p> <h4 id="_1-多进行总结和概括"><a href="#_1-多进行总结和概括" class="header-anchor">#</a> (1) 多进行总结和概括</h4> <p>可以采用总分总、总分、分总这样的文章结构，要有文章概要或者总结的部分,比如：</p> <ul><li>文章的最开始，可以列出这篇文章大概会讲些什么内容，这样别人就可以一下子看出这篇文章里有没有他们想看的内容</li> <li>在文章的最后，可以列一些未来的展望，或是这篇文章的总结、自身的感想等等作为结束</li> <li>具体写作过程中，也可以阶段性地进行一些总结，同时还可以给这些内容加粗着重标志</li></ul> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/about-writing-3.png" alt=""></p> <h4 id="_2-避免一段文字太长"><a href="#_2-避免一段文字太长" class="header-anchor">#</a> (2) 避免一段文字太长</h4> <p>尽量让每个段落保持在不超过 4-6 行的长度。如果一段文字内容太多，别人在阅读的时候稍微不注意就会忘记自己看到哪，导致阅读体验下降。</p> <h4 id="_3-适当地加入一些图片-图形"><a href="#_3-适当地加入一些图片-图形" class="header-anchor">#</a> (3) 适当地加入一些图片/图形</h4> <p>通过图形的方式，别人可以更加形象地理解我们想要表达的内容，比如架构图、时序图、逻辑图
等。
<img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/about-writing-4.png" alt=""> <img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/about-writing-5.png" alt=""></p> <h4 id="_4-拆分步骤、分条列出"><a href="#_4-拆分步骤、分条列出" class="header-anchor">#</a> (4) 拆分步骤、分条列出</h4> <p>这个过程我们也需要对自己的表达进行结构化整理，同时其他人在阅读的时候可以很清晰地理解文章的内容。</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/about-writing-6.png" alt=""></p> <h2 id="如何坚持写"><a href="#如何坚持写" class="header-anchor">#</a> 如何坚持写</h2> <p>写文章其实不需要太多的技巧，写的过程中会慢慢地形成自身的习惯。</p> <p>但写文章最难的点在于，如何坚持下去。在很多时候，写文章都会显得吃力不讨好，大家都不爱写。甚至像我这种经常写文章的，有时候会有人认为工作不饱和、种很闲没事做。那么，我们要怎么让自己坚持写文章呢？</p> <h3 id="量变到质变"><a href="#量变到质变" class="header-anchor">#</a> 量变到质变</h3> <p>不用着急一次性写好，写文章就像写代码，需要不断地改善和优化。或许刚开始写的时候，一篇文章要三四天甚至一两周，但如果写多了慢慢地就会写得很快了。</p> <h3 id="进入良性循环"><a href="#进入良性循环" class="header-anchor">#</a> 进入良性循环</h3> <p>尝试让写文章这件事进入良性循环。</p> <p>知识沉淀，其实对工作是很有帮助的。我们在和其他人分享自己的经验时，也可以获得其他人的一些经验，从而拓展了自身的视野。而当我们把文章分享出去之后，也会慢慢不断地收到的一些反馈，在积累过程中也给自身搭建了不少的自信和热情。</p> <h3 id="让一件事变得更加有趣"><a href="#让一件事变得更加有趣" class="header-anchor">#</a> 让一件事变得更加有趣</h3> <p>文章收到反馈都不具备实时性，很可能我们在发出去之后，需要一周、一个月甚至一年之后才会收到反馈。因此，更多时候可以考虑如何将一件事变得更好玩。</p> <p>写文章，和写前端有个共同的特点，所见即所得。这意味着我可以加很多自己喜欢、觉得好玩的事情进去，整个写的过程它是一个很有趣的过程。</p> <p>可以尝试在工作里也这样做。比如，之前帮后台写一个内部管理系统，当接口返回 404 的时候，随机生成一个猫的图片。除此之外，我也常常在代码注释里写一些结合心情的内容和表情包。</p> <p>在重新整理自己的博客为前端游乐场的时候，也加入了很多自己喜欢的猫：</p> <p><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/about-writing-7.png" alt=""></p> <p>通过这样的方式，可以把一些事情变得很有趣，也会更加喜欢上做这些事情，也可以更好地坚持下去。</p> <h2 id="结束语"><a href="#结束语" class="header-anchor">#</a> 结束语</h2> <p>我们工作的很大一部分内容，都是在反复踩别人的坑，研究别人的代码，而这部分的经验，都是可复制的。一个在某个领域、业务经验熟练的人，只需要把他的经验分享出来，就能快速让其他人获得这些经验。</p> <p>这样做会让自己的不可替代性变弱吗？我觉得并不会，工作中基本上没有不可替代的人，但我节省下来的一些时间，可以做更多的事情，可以往各个方向拓展自己，也可以培养点兴趣爱好，甚至希望早点下班回家也都是可以的。</p> <p>有些小伙伴会担心自己写不好，或者写出来后受到质疑，就不敢大胆地写，或者写了不敢大胆发出来。</p> <p>在这里，分享自己很喜欢的一句话给大家：</p> <blockquote><p>&quot;如果因为怕别人看到就不做自己觉得该做的事情，把它隐藏起来，那就等于说谁都不能做这个事情。如果自己把它做出来并让别人看到，那就等于说谁都可以这样做，然后很多人都会这样去做。&quot;
—曼德拉</p></blockquote></div> <!----> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/godbasin/front-end-playground/edit/sourcecode/docs/front-end-work/front-end-days/about-writing.md" target="_blank" rel="noopener noreferrer">帮阿猪改善此页面！</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----> <blockquote>部分文章中使用了一些网站的截图，如果涉及侵权，请告诉我删一下谢谢~</blockquote> <div style="margin-top:30px;"><div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-sm-0 el-col-md-2 el-col-lg-4" style="padding-left:10px;padding-right:10px;display:block;"><div style="width:1px;height:1px;"></div></div> <div class="el-col el-col-24 el-col-sm-24 el-col-md-18 el-col-lg-16" style="padding-left:10px;padding-right:10px;"><div class="el-card box-card is-always-shadow"><div class="el-card__header"><div class="clearfix"><span>温馨提示喵</span></div></div><div class="el-card__body"> <div class="el-row" style="margin-left:-10px;margin-right:-10px;"><div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="el-image"><div class="image-slot"><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/loading.gif" style="width:100%;"></div><!----></div></div> <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12" style="padding-left:10px;padding-right:10px;"><div class="copyright-text"><div>本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</div> <div>出处：被删的前端游乐场</div> <div>作者：<a href="https://github.com/godbasin" target="_blank">被删</a></div></div></div></div></div></div></div></div></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/front-end-playground/front-end-work/front-end-days/about-front-end-11.html" class="prev">
          11.关于一年一换的魔咒
        </a></span> <span class="next"><a href="/front-end-playground/front-end-work/front-end-days/a-book-with-one-story.html">
          一本书和一个故事
        </a>
        →
      </span></p></div>  <div class="gitalk-container theme-default-content"><div id="gitalk-container" class="content"></div></div></main> <div id="kitty-container"><span><div role="tooltip" id="el-popover-2704" aria-hidden="true" class="el-popover el-popper" style="width:undefinedpx;display:none;"><!----><img src="https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/2code2.jpg" class="image"> <div class="text">牡羊猪的猫粮罐</div> </div><span class="el-popover__reference-wrapper"><div id="kitty" style="background:url(https://github-imglib-1255459943.cos.ap-chengdu.myqcloud.com/assets/img/kitty0.svg);"></div></span></span> <div class="el-dialog__wrapper" style="display:none;"><div role="dialog" aria-modal="true" aria-label="牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）" class="el-dialog" style="margin-top:15vh;"><div class="el-dialog__header"><span class="el-dialog__title">牡羊猪是这样渐渐胖成猪的喵（点击图片可以切换噢）</span><button type="button" aria-label="Close" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><!----><!----></div></div></div></div><div class="global-ui"></div></div>
    <script src="/front-end-playground/assets/js/app.1e2670bf.js" defer></script><script src="/front-end-playground/assets/js/2.38d016d1.js" defer></script><script src="/front-end-playground/assets/js/3.e3f029cb.js" defer></script><script src="/front-end-playground/assets/js/132.31305f5c.js" defer></script>
  </body>
</html>
